<template>
  <view class="">
    <view v-if="list.length ? list[0].id == 1 : !list.length">
      <view class="regis t-a-c" @click="registerItem(mid)">
        <view class="padd" style="background-color: #D2DE90;width: 100%;">空点位</view>
        <view class="padd" style="background-color: #f4f4f4;width: 100%;">注册</view>
      </view>
    </view>

    <view class="mix-tree-list">
      <block v-for="(item2, index2) in AllList" :key="index2">
        <!-- <view class="u-f-ajc" :style="{width: 100/item.ceng+'%'}">
          <view v-if="item.id != -1 && item.id!=1" class="mix-tree-item" :style="[{
            			zIndex: item.rank*-1 +50
            		}]"
            :class="{
            			border: treeParams.border === true,
            			show: item.show,
            			last: item.lastRank,
            			showchild: item.showChild
            		}"
            @click.stop="treeItemTap(item, index)">
            <view class="content u-f-ajc u-f-column t-a-c" :class="1 ? 'activeClass' : ''">
              <view class="bhid padd" style="background-color: #EEC2A9;">编号：{{item.id}}</view>
              <view style="background-color: #F4F4F4;">
                <view class="padd">姓名：{{item.realname}}</view>
                <view class="padd">级别：{{item.levelname}}</view>
              </view>
              <view style="background-color: #EEC5CB;width: 100%;">
                <view class="u-f-ajc padd">累积业绩</view>
                <view class="u-f yeji">
                  <block v-for="(item2, index2) in item.children" :key="index2">
                    <view class="yeji_item" v-if="item2.id != -1 && item2.id != 1">
                      <view>{{item2.realname}}：</view>
                      <view>￥{{item2.x_yeji}}</view>
                    </view>
                  </block>
                </view>
              </view>
              <view class="register t-a-c" v-if="comput(item.children)" @click="registerItem(item.id)">
                <view class="padd" style="background-color: #D2DE90;width: 100%;">空点位</view>
                <view class="padd" style="background-color: #f4f4f4;width: 100%;">注册</view>
              </view>
            </view>

          </view>
        </view> -->


        <scroll-view scroll-x class="scroll_view_list">
          <view style="display: inline-block;" v-for="(item, index) in item2" :key="index" :style="{width: comWidth(item2.length) +'vw'}">
            <view v-if="item.id != -1 && item.id!=1" class="mix-tree-item" :style="[{
            			zIndex: item.rank*-1 +50
            		}]"
              :class="{
            			border: treeParams.border === true,
            			show: item.show,
            			last: item.lastRank,
            			showchild: item.showChild
            		}"
              @click.stop="treeItemTap(item)">

              <!--  :style="{width: item2.length<=2 && 250+'rpx'}" -->
              <view class="content u-f-ajc u-f-column t-a-c" :class="1 ? 'activeClass' : ''">
                <view class="bhid padd" style="background-color: #EEC2A9;">编号：{{item.id}}</view>
                <view style="background-color: #F4F4F4;">
                  <view class="padd">姓名：{{item.realname}}</view>
                  <view class="padd">级别：{{item.levelname}}</view>
                </view>
                <view style="background-color: #EEC5CB;width: 100%;">
                  <view class="u-f-ajc padd">累积业绩</view>
                  <view class="u-f yeji">
                    <block v-for="(item2, index2) in item.children" :key="index2">
                      <view class="yeji_item" v-if="item2.id != -1 && item2.id != 1">
                        <view>{{item2.realname}}：</view>
                        <view>￥{{item2.x_yeji}}</view>
                      </view>
                    </block>
                  </view>
                </view>
                <view class="register t-a-c" v-if="comput(item.children)" @click="registerItem(item.id)">
                  <view class="padd" style="background-color: #D2DE90;width: 100%;">空点位</view>
                  <view class="padd" style="background-color: #f4f4f4;width: 100%;">注册</view>
                </view>
              </view>

            </view>
          </view>
        </scroll-view>


      </block>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default () {
          return [];
        }
      },
      params: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    data() {
      return {
        mid: uni.getStorageSync('mid'),
        treeList: [],
        AllList: [],
        treeParams: {
          defaultIcon: '../../static/mix-tree/defaultIcon.png',
          currentIcon: '../../static/mix-tree/currentIcon.png',
          lastIcon: '',
          border: false
        }
      }
    },
    watch: {
      list(list) {
        this.treeList = [];
        this.treeParams = Object.assign(this.treeParams, this.params);
        console.log(this.treeParams, this.params);
        this.renderTreeList(list);
      },
      treeList(newVal) {
        // let arrs = [];
        // let fangfa = (ind) => {
        //   this.treeList.forEach(item => {
        //     if (item.ceng == ind) {
        //       arrs.push(item)
        //     }
        //   })
        // }
        // for (var i = 1; i <= this.treeList[this.treeList.length-1].ceng; i++) {
        //   fangfa(i)
        // }
        // this.treeList = arrs;
        console.log('新treelist', newVal)
        let allArr = [];
        let fangfa = (ind) => {
          let arr = [];
          newVal.forEach(item => {
            
            if (item.ceng == ind) {
              arr.push(item)
            }
          })
          allArr.push(arr);
        }
        for (var i = 1; i <= 99; i++) {
          fangfa(i)
        }
        this.AllList = allArr
        console.log('查看递归后的数据', this.AllList);
      },
    },
    methods: {
      comWidth(length) {
        return length == 2 ? 50 : length == 1 ? 100 : 33
      },
      comput(children) {
        return children.find(item => item.id == 1)
      },
      registerItem(agentid) {
        uni.navigateTo({
          url: `/pages/team/register?agentid=${agentid}`,
        });
        console.log('查看父级id 跳转', agentid)
      },
      //扁平化树结构
      renderTreeList(list = [], rank = 0, parentId = []) {
        list.forEach(item => {
          if (item.id != -1 && item.id != 1) {
            this.treeList.push({
              id: item.id,
              name: item.name,
              agentid: item.agentid,
              createtime: item.createtime,
              isbaodan: item.isbaodan,
              issan: item.issan,
              issi: item.issi,
              level: item.level,
              levelname: item.levelname,
              openid: item.openid,
              realname: item.realname,
              children: item.children,
              parentId, // 父级id数组
              rank, // 层级
              showChild: false, //子级是否显示
              show: rank === 0, // 自身是否显示
              ceng: item.ceng,
            })
            if (Array.isArray(item.children) && item.children.length > 0) {
              let parents = [...parentId];
              parents.push(item.id);
              this.renderTreeList(item.children, rank + 1, parents);
            } else {
              this.treeList[this.treeList.length - 1].lastRank = true;
            }
          }
        })
      },
      // 点击
      treeItemTap(item) {
        console.log('点击', item)
        let list = this.treeList;
        let id = item.id;

        item.showChild = !item.showChild;
        list.forEach(childItem => {
          if (item.showChild === false) {
            //隐藏所有子级
            if (!childItem.parentId.includes(id)) {
              return;
            }
            if (childItem.lastRank !== true) {
              childItem.showChild = false;
            }
            childItem.show = false;
          } else {
            if (childItem.parentId[childItem.parentId.length - 1] === id) {
              childItem.show = true;
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .content {
    width: 220rpx;
    border: 1px solid #333;

    >view {
      width: 100%;
    }

  }

  .yeji {
    width: 100%;
    font-size: 20rpx;
    flex-wrap: wrap;

    .yeji_item {
      width: 50%;
      // text-align: left;
      margin-bottom: 20rpx;
      // >view {
      //   margin-left: 60rpx;
      // }
    }
  }

  .register {
    border-top: 1px solid #333;
    // width: 30%;
    // margin: 50rpx auto 0;
  }

  .mix-tree-list {
    display: flex;
    // flex-direction: column;
    flex-wrap: wrap;
  }

  .mix-tree-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30upx;
    color: #333;
    width: 100%;
    height: 0;
    opacity: 0;
    transition: .2s;
    position: relative;
  }

  .mix-tree-item.border {
    // border-bottom: 1px solid #aaa;
  }

  .mix-tree-item.show {
    height: 400upx;
    opacity: 1;
  }

  .mix-tree-icon {
    width: 26upx;
    height: 26upx;
    margin-right: 8upx;
    opacity: .9;
  }

  .mix-tree-item.showchild:before {
    transform: rotate(90deg);
  }

  .mix-tree-item.last:before {
    opacity: 0;
  }

  .padd {
    padding: 12rpx 0;
  }

  .regis {
    width: 30%;
    border: 1px solid #333;
    margin: 0 auto;
  }

  .scroll_view_list {
    width: 100%;
    white-space: nowrap;
  }
</style>
